<template>
  <div class="ADmessage">
    <el-card class="card">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>账号管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表格数据 -->
      <div class="text item" v-loading="loading">
        <el-table
        :data='list'
        stripe
        style="width: 100%"
        height="470"
        >
          <el-table-column
          type="index"
          width="40"
          fixed="left"
          >
          </el-table-column>
          <el-table-column
          prop="username"
          label="用户名"
          width="120"
          >
          </el-table-column>
          <el-table-column
          prop="sex"
          label="性别"
          width="100"
          >
          </el-table-column>
          <el-table-column
          prop="tel"
          label="电话号码"
          width="180"
          >
          </el-table-column>
          <el-table-column
          label="支付宝"
          prop="alipay"
          width="180"
          >
          </el-table-column>
          <el-table-column
          prop="province"
          label="省份"
          width="100"
          >
          </el-table-column>
          <el-table-column
          prop="city"
          label="城市"
          width="120"
          >
          </el-table-column>
          <el-table-column
          prop="addr"
          label="详细地址"
          width="200"
          >
          </el-table-column>
          <el-table-column
          prop="editor"
          label="编辑"
          width="400"
          >
            <template slot-scope="scope">
              <el-button
              size="mini"
              plain
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editor(scope.row)"
              >
              </el-button>
              <el-button
              size="mini"
              plain
              type="success"
              icon="el-icon-unlock"
              circle
              @click="editpsw(scope.row)"
              >
              </el-button>
              <el-button
              type="warning"
              plain
              round
              size="mini"
              @click="unforbid(scope.row)"
              >
              开启售卖权
              </el-button>
              <el-button
              type="warning"
              plain
              round
              size="mini"
              @click="forbid(scope.row)"
              >
              关闭售卖权
              </el-button>
              <el-button
              size="mini"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteOpen(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="Conpager">
        <el-pagination
        class='stu-pager'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        >
       </el-pagination>
      </div>
      <!-- 编辑组件 -->
      <el-dialog title="编辑用户" :visible.sync="dialogEditorVisible" style=" min-width: 1300px">
        <el-form :model="editform" style="margin-right:130px">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="editform.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="editform.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付宝" :label-width="formLabelWidth">
          <el-input v-model="editform.alipay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
           <template>
              <el-radio v-model="editform.sex" label="1">男</el-radio>
              <el-radio v-model="editform.sex" label="0">女</el-radio>
            </template>
        </el-form-item>
        <el-form-item label="省份" :label-width="formLabelWidth">
          <el-input v-model="editform.province" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="editform.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="editform.addr" autocomplete="off"></el-input>
        </el-form-item>
        </el-form>
        <div  slot="footer" class="dialog-footer">
          <el-button @click="dialogEditorVisible = false">取 消</el-button>
          <el-button type="primary" @click="createdinfo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改密码组件 -->
      <el-dialog title="修改密码" :visible.sync="dialogpswVisible" style=" min-width: 1300px">
        <el-form :model="pswform" style="margin-right:130px">
        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input v-model="pswform.oldpassword" autocomplete="off" type="password" :show-password="true">
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="pswform.newpassword" autocomplete="off" type="password"  :show-password="true">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="pswform.repassword" autocomplete="off" type="password"  :show-password="true"></el-input>
        </el-form-item>
        </el-form>
        <div  slot="footer" class="dialog-footer">
          <el-button @click="dialogpswVisible = false">取 消</el-button>
          <el-button type="primary" @click="createdpsw()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ADmessage',
  data () {
    return {
      loading: false,
      value: 'true',
      query: '',
      list: [],
      pageNumber: 1,
      pageSize: 8,
      totalCount: -1,
      role: [],
      tid: '',
      sex: '',
      dialogFormVisibleAdd: false,
      dialogEditorVisible: false,
      dialogpswVisible: false,
      formLabelWidth: '120px',
      form: {
        numbder: '',
        name: '',
        roleIdList: [],
        status: true,
        password: ''
      },
      editform: {
        addr: "",
        alipay: "",
        city: "",
        id: '',
        province: "",
        sex: '',
        tel: "",
        username: ""
      },
      pswform: {
        id:'',
        newpassword: "",
        oldpassword: "",
        repassword: ""
      }
    }
  },
  components: {},
  created () {
    this.getUserlist()
  },
  mounted () {
    this.loading = true
  },
  methods: {
    // 编辑用户信息
    editor (info) {
      this.tid = info.id
      if (info.sex === '男') {
        this.sex = '1'
      } else {
        this.sex = '0'
      }
      this.editform = {
        addr: info.addr,
        alipay: info.alipay,
        city: info.city,
        id: info.id,
        province: info.province,
        sex: this.sex,
        tel: info.tel,
        username: info.username
      },
      console.log(this.editform)
      this.dialogEditorVisible = true
    },
    async createdinfo () {
      const info = {
        addr: this.editform.addr,
        alipay: this.editform.alipay,
        city: this.editform.city,
        id: this.editform.id,
        province: this.editform.province,
        sex: this.editform.sex,
        tel: this.editform.tel,
        username: this.editform.username
      }
      console.log(info)
      const res = await this.$http.put('user/updateInfo', info)
      console.log(res)
      if (res.data.status === 200) {
        this.$message.success('修改成功！')
        this.dialogEditorVisible = false
        this.getUserlist()
      } else {
        this.$message.error('error')
      }
    },
    // 修改密码
    editpsw (info) {
      this.tid = info.id
      this.dialogpswVisible = true
    },
    // 修改密码
    async createdpsw () {
      const pswform = {
        oldpassword: this.pswform.oldpassword,
        newpassword: this.pswform.newpassword,
        repassword: this.pswform.repassword,
        id: this.tid
      }
      console.log(pswform)
      const AUTH_TOKEN = sessionStorage.getItem('adtoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.put('user/updatePassword', pswform)
      console.log(res)
      const {status} = res
      if (status === 200) {
        this.$message.success('修改成功！')
        this.dialogpswVisible = false
        this.pswform = {}
        this.getUserlist()
      } else {
        this.$message.error('修改失败！')
      }
    },
    // 解禁售卖权
    async unforbid (info) {
      const res = await this.$http.put(`user/unforbid?id=${info.id}`)
      // console.log(res)
      if (res.data.status === 200) {
        this.$message.success('开启成功！')
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 关闭售卖权
    async forbid(info) {
      const res = await this.$http.put(`user/forbid?id=${info.id}`)
      // console.log(res)
      if (res.data.status === 200) {
        this.$message.success('关闭成功！')
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 获取所有用户信息
    async getUserlist () {
      const AUTH_TOKEN = sessionStorage.getItem('adtoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get(`user/selectAll?pageNow=${this.pageNumber}&pageSize=${this.pageSize}`)
      const {status, msg, data: {list, totalCount}} = res.data
      console.log(res)
      if (status === 200) {
        this.list = list
        this.totalCount = totalCount
        this.loading = false
      } else {
        console.log(msg)
      }
    },
    // 删除用户信息
    deleteOpen (info) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const tid = info.id
        console.log(tid)
        const res = await this.$http.delete(`user/delete?id=${tid}`)
        console.log(res)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getUserlist()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
      })
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getUserlist()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      // console.log(`当前页: ${val}`)
      this.getUserlist()
    }
  }
}
</script>

<style scoped lang="stylus">
.ADmessage,.card
  height 100%
  min-width: 1250px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 100px
  .text
    padding-top 30px
    height 470px
  .Conpager
    margin 0 auto
    padding-top 20px
  .stu-pager
    text-align center
</style>
